<style>
    div {
        width: 800px;
        height: 40px;
        border: solid 1px black;
        margin: 30px auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<div class="page1"></div>
<div class="page2"></div>
<script>
function Page(el,options={}){
        this.el=document.querySelector(el)
        this.options=options
        this.init()

}

Page.prototype.init=function(){
    this.bindEvent()
    this.createTag()
}
Page.prototype.bindEvent=function(){
    this.el.onclick=(e)=>{
        let evt=e||window.event
        let target=evt.target||evt.srcElement
        if(target.nodeName==='P'){
         switch(target.innerText){
        case this.options.pageTag.first:
     this.options.pageInfo.pageNum=1
         break;
         case this.options.pageTag.prev:
             if(this.options.pageInfo.pageNum===1)return
             this.options.pageInfo.pageNum--
             break;
             case this.options.pageTag.next:
             if(this.options.pageInfo.PageNum===this.options.pageInfo.totalPage)return
             this.options.pageInfo,pageNum++
             break;
             case this.options.pageTag.last:
                 this.options.pageInfo.pageNum=this.options.pageInfo.totalPage
                 break;
                 default:
                     if(parseInt(target.innerHTML)>0){
                         this.optionns.pageInfo.pageNum=parseInt(target.innerHTML)
                     }   
                     break;    
            }
            this.createTag()
        }
    }
}

Page.prototype.createTag=function(){
    this.el.innerHTML=''
    let pageTag=this.options.pageTag
    for(let key in pageTag){
        this.createP('p',pageTag[key],this.el)
        }
    this.createNum()
    }
Page.prototype.createNum=function(){
    let tag3Obj=this.el.querySelector('p:nth-child(3)')
    tag3Obj.style.border='none'
    tag3Obj.style.margin='0px'
    tag3Obj.style.padding='0px'

    let pageNum=this.options.pageInfo.pageNum
    this.options.pageInfo.totalPage=Math.ceil(this.options.pageInfo.totalDate/this.options.pageInfo.pageSize)
    let totalPage=this.options.pageInfo.totalPage
    if (totalPage < 7) {
            for (let i = 1; i <= totalPage; i++) this.createP('p', i, tag3Obj)
        } else if (pageNum < 5) {
            for (let i = 1; i <= 5; i++) this.createP('p', i, tag3Obj)
            this.createP('p', '...', tag3Obj)
            this.createP('p', totalPage - 1, tag3Obj)
            this.createP('p', totalPage, tag3Obj)
        } else if (pageNum == 5) {
            for (let i = 1; i <= 7; i++) this.createP('p', i, tag3Obj)
            this.createP('p', '...', tag3Obj)
            this.createP('p', totalPage - 1, tag3Obj)
            this.createP('p', totalPage, tag3Obj)
        } else if (pageNum > 5 && pageNum < totalPage - 4) {
            for (let i = 1; i <= 2; i++) this.createP('p', i, tag3Obj)
            this.createP('p', '...', tag3Obj)
            this.createP('p', pageNum - 2, tag3Obj)
            this.createP('p', pageNum - 1, tag3Obj)
            this.createP('p', pageNum, tag3Obj)
            this.createP('p', pageNum + 1, tag3Obj)
            this.createP('p', pageNum + 2, tag3Obj)
            this.createP('p', '...', tag3Obj)
            this.createP('p', totalPage - 1, tag3Obj)
            this.createP('p', totalPage, tag3Obj)
        } else if (pageNum >= totalPage - 4) {
            for (let i = 1; i <= 2; i++) this.createP('p', i, tag3Obj)
            this.createP('p', '...', tag3Obj)
            for (let i = totalPage - 4; i <= totalPage; i++) this.createP('p', i, tag3Obj)
        }
    }

    Page.prototype.createP = function (tagName, content, fatherObj) {

      
        let pObj = document.createElement(tagName)
        pObj.innerText = content
        pObj.style.border = 'solid 1px black'
        pObj.style.margin = '0 5px'
        pObj.style.padding = '0 5px'
        pObj.style.display = 'inline-block'
       
        if (content === this.options.pageInfo.pageNum) pObj.style.background = 'orange'
        fatherObj.appendChild(pObj)
    }

 

    let page1 = new Page('.page1', {
        pageTag: {
            first: '首页',
            prev: '上一页',
            list: null,
            next: '下一页',
            last: '末页',
        },
        pageInfo: {
            pageNum: 97,  
            pageSize: 10,    
            totalData: 1001, 
            totalPage: 100,  
        }   
    })

    let page2 = new Page('.page2', {
        pageTag: {
            first: 'first',
            prev: 'prev',
            list: null,
            next: '下一页',
            last: '末页',
        },
        pageInfo: {
            pageNum: 1,     
            pageSize: 10,   
            totalData: 60, 
            totalPage: 100,  
        }
    })
</script>